import React, { useState, useCallback, useMemo } from 'react'

import Child from './Child'

// let style = {fontSize: '100px'}

// const handleReceive = (value) => {
//   console.log(value)
// }

export default function App() {
  let [title, setTitle] = useState('hello')

  // let handleReceive = useCallback(
  //   (value) => {
  //     return () => {
  //       console.log(value)
  //     }
  //   },
  //   []
  // )

  // let handleReceive = useMemo(
  //   () => {
  //     return (value) => {
  //       return () => {
  //         console.log(value)
  //       }
  //     }
  //   },
  //   []
  // )

  const NewChild = useMemo(() => () => <Child title={title}></Child>, [title])

  return (
    <div>
      <div>{title}</div>
      {/* <Child onReceive={handleReceive}></Child> */}
      <NewChild></NewChild>
      <div>
        {/* <button onClick={() => setTitle(new Date().getTime())}>click</button> */}
        <button onClick={() => setTitle('world')}>click</button>
      </div>
    </div>
  )
}